<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="帖子标题" prop="postTitle">
      <el-input v-model="postTitle" placeholder="请输入标题哦"></el-input>
    </el-form-item>
    <el-form-item label="地址" prop="postAddress">
      <el-input v-model="postAddress" placeholder="请输入地址哦"></el-input>
    </el-form-item>
    <el-form-item label="帖子分类">
      <el-select v-model="postCategory" placeholder="请选择分类">
        <el-option label="理工一食堂" value="1"></el-option>
        <el-option label="理工二食堂" value="2"></el-option>
        <el-option label="理工教学楼" value="3"></el-option>
        <el-option label="理工操场/运动场" value="4"></el-option>
        <el-option label="舞萌/中二出勤" value="5"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="帖子内容" prop="postContent">
      <el-input v-model="postContent" placeholder="请输入内容哦" type="textarea"></el-input>
    </el-form-item>
    <el-form-item label="发布者" prop="postAuthor">
      <el-input v-model="postAuthor" placeholder="请输入发布者哦"></el-input>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="onSubmit">提交</el-button>
</template>

<script>
import {ElMessage} from "element-plus";
import axios from "axios";

export default {
  data() {
    return {
      postTitle: '',
      postAddress: '',
      postContent: '',
      postAuthor: '',
      postCategory: '',
    }
  },
  methods: {
    onSubmit() {
      //校验所有值为空
      if (this.postTitle === '' || this.postAddress === '' ||
          this.postContent === '' || this.postAuthor === '' ||
          this.postCategory === '') {
        ElMessage.error('所有信息都不能为空');
        return;
      }

      // 发送请求
      axios.post('/api/posts', {
        postTitle: this.postTitle,
        postAddress: this.postAddress,
        postContent: this.postContent,
        postAuthor: this.postAuthor,
        postCategory: this.postCategory,
      })
    },
  },
}
</script>


<style>
.el-menu-vertical-demo {
  background-color: #f5f5f5;
}

.partner-logos img {
  width: 100px;
  margin-right: 10px;
}

</style>